<template>
  <rk-dialog width="1000"
    height="550"
    :title="title"
    :visible="visible"
    :destroyOnClose="true"
    @close="visible = false"
    :maskClosable="false">
    <user-form :is-edit="options.isEdit"
      :user-model="options.data"
      ref="userFormRef" />
    <template #footer>
      <el-button type="primary"
        @click="onSaveClick">确定
      </el-button>
      <el-button @click="visible=false">取消</el-button>
    </template>
  </rk-dialog>
</template>

<script setup>

import { computed, onMounted, reactive, ref } from "vue";
import UserForm from "@/views/system/user/form/UserForm.vue";
import { useUserApi } from "@/api/index.js";
import { ElMessage } from "element-plus";
const { userSave } = useUserApi();
const props = defineProps({
  ok: {
    type: Function,
    default: () => {
    }
  }
})
const userFormRef = ref(null)
const visible = ref(false)
const options = reactive({
  isEdit: false,
  data: {},
})
const title = computed(() => {
  return options.isEdit ? '修改用户信息' : '填写用户信息'
})
const handleOpen = (value) => {
  Object.assign(options, value)
  visible.value = true
}
const onSaveClick = async () => {
  if (await userFormRef.value.validateForm()) {
    const formData = userFormRef.value.getFormData()
    userSave(formData).then((resp) => {
      if (resp.code === 200) {
        ElMessage.success({ message: '保存成功' })
        visible.value = false
        props.ok()
      } else {
        ElMessage.error({ message: resp.msg })
      }
    })
  } else {
    ElMessage.error({ message: '验证失败' })
  }
}

const handleClose = () => {
  visible.value = false
}
defineExpose({
  handleOpen,
  handleClose
})

</script>

<style scoped lang="scss">
</style>
